<template>

  <view class="wrap">
	  <div class="sub-box">
		  	<u-subsection @change="subChange" bgColor="#434857" inactiveColor="#ffffff" :list="subList" :current="subNum"></u-subsection>
	  </div>
	<view v-show="subNum === 0">
		<u-gap height="70"></u-gap>
		<view class="list-wrap">
		  <div id="chart" :style="'width: 100%;height:30vh'"></div>
		</view>
	</view>
	<view v-show="subNum === 1">
		<u-gap height="70"></u-gap>
		<view class="list-wrap">
		  <div id="chart2" :style="'width: 100%;height:30vh'"></div>
		</view>
	</view>
  </view>
</template>

<script>
import * as echarts from 'echarts';

export default {
  mounted() {
    this.$u.get('/admin/chart', {}).then(res => {
		this.resData = res
		this.chartRef = echarts.init(document.getElementById('chart'))
				const option = {
				  title: {
				    text: ''
				  },
				  tooltip: {},
				  xAxis: {
				    data: this.resData.bar_x
				  },
				  yAxis: {},
				  series: [{
				    name: '专业数量',
				    type: 'bar',
				    data: this.resData.bar_y
				  }]
				};
				// 使用刚指定的配置项和数据显示图表。
		this.chartRef.setOption(option);
    })

  },
  data() {
    return {
      data_list: [],
      title: false,
      mode: 'round',
      indicatorPos: 'bottomCenter',
      effect3d: true,
	  subNum: 0,
	  subList: ['专业','地区'],
	  resData: {},
	  chartRef: null
    }
  },
  computed: {
    getIcon() {
      return path => {
        return 'https://cdn.uviewui.com/uview/example/' + path + '.png';
      }
    },
    desc() {
      return this.$t('components.desc');
    },
  },
  onShow() {
    uni.setNavigationBarTitle({
      title: '数据统计'
    });
  },
  created() {
    console.log(1)
  },
  methods: {
	  subChange(val) {
		this.chartRef.clear()
		let option = null
		if(val === 0){
			// ECharts 图表配置
			option = {
			  title: {
			    text: ''
			  },
			  tooltip: {},
			  xAxis: {
			    data: this.resData.bar_x
			  },
			  yAxis: {},
			  series: [{
			    name: '专业数量',
			    type: 'bar',
			    data: this.resData.bar_y
			  }]
			};
		}else{
			option = {
			  tooltip: {
			    trigger: 'item'
			  },
			  series: [
			    {
			      type: 'pie',
			      radius: '50%',
			      data: this.resData.pie,
			      emphasis: {
			        itemStyle: {
			          shadowBlur: 10,
			          shadowOffsetX: 0,
			          shadowColor: 'rgba(0, 0, 0, 0.5)'
			        }
			      }
			    }
			  ]
			};
		}
		this.chartRef.setOption(option);
	  },
    getGet() {
      this.$u.get('/major/list', {
        id: 2
      }).then(res => {
        this.result = res;
      })
    },
    openPage(path) {
      this.$u.route({
        url: path
      })
    },
    getGroupTitle(item) {
      return this.$i18n.locale == 'zh' ? item.groupName : item.groupName_en
    },
    getFieldTitle(item) {
      return this.$i18n.locale == 'zh' ? item.title : item.title_en
    }
  }
}
</script>

<style>
/* page {
  background-color: rgb(240, 242, 244);
} */
</style>

<style lang="scss" scoped>
	.sub-box{
		padding: 0 30rpx;
	}
.u-cell-icon {
  width: 36 rpx;
  height: 36 rpx;
  margin-right: 8 rpx;
}

.item {
  margin: 30 rpx 0;
}
</style>